<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content :native-scrollbar="false" title="领取列表" closable>
            <n-spin :show="loading">
                <n-space vertical :size="12">
                    <n-space justify="space-between">
                        <n-space>
                            <!-- <n-button @click="doAdd">
                                <template #icon>
                                    <n-icon :component="AddRound" />
                                </template>
                                添加
                            </n-button>
                            <n-button type="warning" :disabled="srows.length == 0" @click="doBatchDelete">
                                <template #icon>
                                    <n-icon :component="DeleteForeverRound" />
                                </template>
                                删除
                            </n-button> -->
                        </n-space>
                        <n-space>
                            <n-form inline :model="param" :show-label="false" :show-feedback="false" ref="formRef">
                                <n-form-item>
                                    <n-tooltip trigger="hover">
                                        <template #trigger>
                                            <n-date-picker v-model:value="dates" style="width: 250px" type="daterange" :update-value-on-close="true" />
                                        </template>
                                        入账时间段
                                    </n-tooltip>
                                </n-form-item>
                            </n-form>
                            <n-button @click="doQuery">
                                <template #icon>
                                    <n-icon :component="YoutubeSearchedForRound" />
                                </template>
                                查询
                            </n-button>
                        </n-space>
                    </n-space>
                    <n-data-table
                        striped
                        size="large"
                        type="selection"
                        :checked-row-keys="srows"
                        :max-height="height"
                        :min-height="items.length > 0 ? height : 0"
                        :row-key="(row:any) => row.id"
                        @update:checked-row-keys="onCheckRow"
                        :columns="columns"
                        :data="items"
                    />
                </n-space>
            </n-spin>
            <template #footer>
                <div :style="{ width: '100%' }">
                    <n-space justify="space-between">
                        <n-pagination
                            show-size-picker
                            :page="param.pager.page"
                            :page-size="param.pager.size"
                            :page-count="pager.all"
                            :page-sizes="[10, 25, 50, 100]"
                            @update:page="onChangePage"
                            @update:page-size="onChangeSize"
                        >
                            <template #prefix="{}">当前 {{ pager.now }} / {{ pager.all }} 页，共 {{ pager.row }} 条数据</template>
                        </n-pagination>
                        <n-button type="tertiary" @click="() => (active = false)">
                            <template #icon>
                                <n-icon :component="CloseRound" />
                            </template>
                            关闭
                        </n-button>
                    </n-space>
                </div>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, h, ref, watch } from 'vue'
import { CloseRound } from '@vicons/material'
import { useStore } from '@/store'
import { YoutubeSearchedForRound } from '@vicons/material'
import { NSpace, NText, NIcon, NButton, NTag } from 'naive-ui'
import { Http } from '@/libs'

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn' // 导入本地化语言
import customParseFormat from 'dayjs/plugin/customParseFormat'
dayjs.locale('zh-cn')
dayjs.extend(customParseFormat)

const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.8, 1200))

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const emit = defineEmits(['update:show'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const loading = computed(() => store.state.loading.flag)

const height = computed(() => store.state.browser.innerHeight - 310)

const columns = [
    {
        type: 'selection',
        fixed: 'left',
        align: 'center',
    },
    {
        title: '券码',
        key: 'id',
        width: 200,

        align: 'left',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(NText, {}, { default: () => row.id })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '领取人',
        key: 'owner',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h(NTag, { border: false, size: 'small', type: 'info' }, { default: () => (row.owner.type === 2 ? '门店' : '会员') })

            comps[comps.length] = h('span', {}, { default: () => row.owner.name })
            if (row.owner.mob) {
                comps[comps.length] = h('span', {}, { default: () => row.owner.mob })
            }

            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '领取时间',
        key: 'summ',
        align: 'center',
        width: 200,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => `${row.create}` })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '有效期',
        key: 'summ',
        align: 'center',
        width: 200,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []
            comps[comps.length] = h('span', {}, { default: () => `${row.indate} / ${row.expire}` })
            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
    {
        title: '状态',
        key: 'areas',
        align: 'center',
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            let comps: any[] = []

            if (row.state == 1) {
                comps[comps.length] = h(NTag, { size: 'small', type: 'info' }, { default: () => '未使用' })
            }
            if (row.state == 2) {
                comps[comps.length] = h(NTag, { size: 'small', type: 'warning' }, { default: () => '已使用' })
            }
            if (row.state == 9) {
                comps[comps.length] = h(NTag, { size: 'small', type: 'error' }, { default: () => '已过期' })
            }

            return h(NSpace, { wrap: false }, { default: () => comps })
        },
    },
]

const srows = ref<string[]>([])

const onCheckRow = (keys: string[]) => {
    srows.value = keys
}

const onChangeSize = (size: number) => {
    param.value.pager.page = 1
    param.value.pager.size = size
    execLoad()
}

const onChangePage = (page: number) => {
    param.value.pager.page = page
    execLoad()
}

const dates = ref<number[]>([dayjs().subtract(1, 'month').valueOf(), dayjs().valueOf()])
watch([dates, () => dates.value], (nv, _ov) => {
    let v = nv[0] as number[]
    param.value.query.begin = dayjs(v[0]).format('YYYY-MM-DD')
    param.value.query.close = dayjs(v[1]).format('YYYY-MM-DD')
})

const param = ref({
    query: {
        tid: prop.item.id,
        mob: '',
        begin: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        close: dayjs().format('YYYY-MM-DD'),
    },
    pager: {
        page: 1,
        size: 25,
        time: new Date().getTime(),
    },
})

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref([])

const doQuery = () => {
    param.value.pager.page = 1
    execLoad()
}

const execLoad = () => {
    Http.post('/ops/opx/coupon/info/list', param.value).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        srows.value = []
        pager.value = resp.data.pager
        items.value = resp.data.items
    })
}
</script>
